<template>
  <div class="app-content flex">
    <div class="h100 flex-column tree-left">
      <el-input class="mb10 tree-input" v-model="filterText" placeholder="请输入电站名称" clearable></el-input>
      <div class="card h0 flex1 flex-column">
        <el-checkbox v-if="!filterText" v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
          全部电站
        </el-checkbox>
        <el-scrollbar class="flex1">
          <el-checkbox-group v-model="stationIds" @change="handleCheckedChange">
            <el-checkbox class="flex" v-for="(item,index) in stationList" :key="index" :label="item.stationName" :value="item.stationId">
              {{ item.stationName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-scrollbar>
      </div>
    </div>
    <div class="h100 flex1 flex-column">
      <div class="h50 flex-column">
        <TypeDate class="mb10" v-model:type="type" v-model:date="date" @change="handleTypeDateChange"></TypeDate>
        <ElectricEcharts :data="list" :dateType="type"></ElectricEcharts>
      </div>
      <RichTable class="flex1" ref="richTableRef" :options="options"></RichTable>
    </div>
  </div>
</template>

<script setup>
import { stationElectricEchartsApi } from '@/api/station';
import ElectricEcharts from '@/components/Echart/ElectricEcharts'
import TypeDate from '@/components/TypeDate'
import useUserStore from '@/store/modules/user'
import { onMounted } from 'vue';
const userStore = useUserStore()
const { proxy } = getCurrentInstance()

const filterText = ref('')
const stationList = computed(() => {
  return filterText.value?userStore.stationList.filter(item => item.stationName.includes(filterText.value)):userStore.stationList
})

const checkAll = ref(false) // 是否全选
const isIndeterminate = ref(false) // 是否半选中
const handleCheckAllChange = (val) => { // 监听全选按钮
  stationIds.value = val ? userStore.stationList.map(item => item.stationId) : []
  isIndeterminate.value = false
  richTableRef.value.initTable()
}
const handleCheckedChange = (value) => { // 监听选中
  const checkedCount = value.length
  checkAll.value = checkedCount === userStore.stationList.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < userStore.stationList.length
  richTableRef.value.initTable()
}

// 发电量报表列表
const richTableRef = ref();
const options = ref({
  download:true,
  downloadUrl:'/bopeng-cms/station/quantity/report/export',
  downloadName:'electric',
  // 表格接口
  tableRequest: {
    url: "/bopeng-cms/station/quantity/report/list",
    method: 'post',
    data: {
      date:'',
      type:1,
      stationIds: [userStore.stationInfo.stationId],
    }
  },
  column: [
    { prop: 'stationName', label: '电站名称', },
    { prop: 'stationNo', label: '电站ID', },
    { prop: 'stationPower', label: '装机功率(kWp)', },
    { prop: 'createTime', label: '并网日期', },
    { prop: 'electricQuantity', label: '当日发电量(kWh)', },
    { prop: 'totalElectricQuantity', label: '总发电量(kWh)', },
    { prop: 'income', label: '今日收入(元)', },
  ],
})
const { date, type, stationIds } = toRefs(options.value.tableRequest.data) // 保持响应式的解构

// 获取发电量图表
const list = ref([])
const stationElectricTable = async () => {
  try {
    let res = await stationElectricEchartsApi(options.value.tableRequest.data)
    if(options.value.tableRequest.data.type==1) { // 日期类型日时,时间是时分格式
      res.data.forEach(item => {
        item.name = proxy.parseTime(item.name, "{h}:{i}")
      })
    }
    list.value = res.data
  }catch(err) {}
}

// 时间类型改变回调
const handleTypeDateChange = () => {
  let typeText = ''
  if(type.value==1) {
    typeText = '当日'
  }else if(type.value==2) {
    typeText = '当月'
  }else if(type.value==3) {
    typeText = '当年'
  }else if(type.value==4) {
    typeText = '累计'
  }
  options.value.column[4].label = typeText+'发电量(kWh)'
  options.value.column[6].label = typeText+'收入(元)'
  stationElectricTable()
  richTableRef.value.initTable()
}

onMounted(() => {
  stationElectricTable()
})
</script>

<style lang="scss" scoped>
.app-content {
  height: calc(100vh - 84px);
}
</style>
